<template>
	<view>
		<view class="map-page">
			<map id="map" class="map" :latitude="latitude" :longitude="longitude" :markers="covers"
				:enable-building="true" :polyline="polyline" :scale="scale" enable-3D="true"></map>
			<!-- @regionchange="regionchange" -->
			<cover-view class="btn-box">
				<cover-view class="btn_text" v-if="location_address!=''">当前位置：{{location_address}}</cover-view>
				<cover-view class="btn" @click="submit()">地址解析</cover-view>
				<cover-view class="btn" @click="onPlayAudio()">语音播报</cover-view>
				<cover-view class="btn" @click="goToRide()">路线规划</cover-view>
			</cover-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				scale: 15,
				latitude: 30.659462,
				longitude: 104.065735,
				covers: [], //存放标记点数组
				location_address: '',
				distance: '',
				cost: '',
				polyline: []
			}
		},
		onLoad() {
			this.getLocation();
		},
		methods: {
			goToRide() {

				var that = this
				that.myAmapFun.getRidingRoute({
					origin: '118.343367,35.114109', // start
					destination: '118.355317,35.106909', // end
					success: function(data) {
						// 路线规划
						var points = [];
						if (data.paths && data.paths[0] && data.paths[0].rides) {
							var steps = data.paths[0].rides;
							for (var i = 0; i < steps.length; i++) {
								var poLen = steps[i].polyline.split(';');
								for (var j = 0; j < poLen.length; j++) {
									points.push({
										longitude: parseFloat(poLen[j].split(',')[0]),
										latitude: parseFloat(poLen[j].split(',')[1])
									})
								}
							}
						}
						// 直线
						var points1 = [
							{
								latitude:35.114109,
								longitude: 118.343367,
							},
							{
								latitude: 35.106909,
								longitude: 118.355317,
							}
						];
						that.polyline = [{
							points: points,
							color: "#0091ff",
							dottedLine: false,
							arrowLine: true,
							width: 6
						}]

						console.log('---', that.polyline)
					},
					fail: function(info) {

					}
				})
			},
			onPlayAudio() {
				var type = 7
				var audio_src = ''; 
 
				if (type == 1) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/xindingdan_new1.mp3'; //新订单
				} else if (type == 2) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/tuikuan_new1.mp3';  //退款取消
				}else if (type == 3) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/paidan_new1.mp3';  //派单
				}else if (type == 4) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/zhuan_succ_new1.mp3';  //转单成功
				}else if (type == 5) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/zhuan_fail_new1.mp3';  //转单失败
				}else if (type == 6) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/shangxian_new.mp3';  //上线
				}else if (type == 7) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/xiuxi_new1.mp3';  //下线 
				}else if (type == 8) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/qiang_succ_new.mp3';  //抢单成功
				}else if (type == 9) {
					audio_src = 'https://www.cccshansong.com/chong_weapp/music/qiang_fail_new3.mp3';  //抢单失败
				}
				
				var music = null;
				music = uni.createInnerAudioContext(); //创建播放器对象 
				music.src = audio_src; //这里引入自己生成的mp3音频文件地址
				music.play(); //执行播放
				music.onEnded(() => {
					//播放结束
					music = null;
				});


			},
			//获取经纬度
			getLocation() {
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						console.log(res)
						let {
							latitude,
							longitude
						} = res;
						that.latitude = latitude;
						that.longitude = longitude;
						that.covers = []
						that.setCovers(latitude, longitude)
					},

				})
			},
			//地图视野发生变化
			regionchange(e) {
				let that = this;
				if (e.type === 'end') {
					let {
						latitude,
						longitude
					} = e.detail.centerLocation;
					that.covers = []
					that.latitude = latitude
					that.longitude = longitude
					that.setCovers(latitude, longitude);
				} else if (e.type == 'regionchange') {
					that.mapContext = uni.createMapContext("map", this);
					that.mapContext.getCenterLocation({
						type: 'gcj02',
						success: (res) => {
							let {
								latitude,
								longitude
							} = res;
							that.covers = []
							that.latitude = latitude
							that.longitude = longitude
							that.setCovers(latitude, longitude);
						},
						fail: (err) => {
							// console.log('获取当前地图中心的经纬度2', err);
						}
					})
				}
			},
			//设置点位
			setCovers(latitude, longitude) {
				let that = this;
				// var iconPath = 'https://admin.shijianmedia.com/storage/image/images/position.png'
				// var temp_marker = {
				//   iconPath: iconPath,
				//   id: 0,
				//   name: '东方家园',
				//   latitude:Number(latitude),
				//   longitude: Number(longitude),
				//   width: 34,
				//   height: 34,
				//   label: null,   
				//   callout: {
				//     content:  '东方家园',
				//     color: '#000000',
				//     fontSize: 9, 
				//     borderRadius: 30,
				//     bgColor: '#ffffff',
				//     padding: 5
				//   }

				// }
				// that.covers.push(temp_marker)

				var iconPath = 'https://www.cccshansong.com/chong_weapp/map_qu_icon.png'
				var iconPath1 = 'https://www.cccshansong.com/chong_weapp/map_song_icon.png'
				var temp_marker = {
					iconPath: iconPath,
					id: 0,
					name: '万达广场',
					latitude: 35.106909,
					longitude: 118.355317,
					width: 34,
					height: 34,
					label: null,
					callout: {
						content: '东方家园',
						color: '#000000',
						fontSize: 9,
						borderRadius: 30,
						bgColor: '#ffffff',
						padding: 5
					}

				}
				var temp_marker1 = {
					iconPath: iconPath1,
					id: 1,
					name: '东方购物',
					latitude: 35.114109,
					longitude: 118.343367,
					width: 34,
					height: 34,
					label: null,
					callout: {
						content: '东方家园',
						color: '#000000',
						fontSize: 9,
						borderRadius: 30,
						bgColor: '#ffffff',
						padding: 5
					}

				}
				that.covers.push(temp_marker)
				that.covers.push(temp_marker1)
			},
			//提交
			submit() {
				let that = this
				uni.showLoading({
					title: '加载中'
				});
				that.myAmapFun.getRegeo({
					location: `${this.longitude},${this.latitude}`,
					success: function(res) {
						uni.hideLoading();
						if (res.length > 0) {
							console.log(res[0].regeocodeData.formatted_address)
							that.location_address = res[0].regeocodeData.formatted_address
						} else {
							uni.$u.toast('地址解析失败');
						}
					},
					fail: function(res) {
						uni.hideLoading();
						uni.$u.toast('地址解析失败');
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background-color: #f5f6f8;
	}

	.map-page {
		height: 100vh;

		.map {
			width: 750rpx;
			height: 100vh;
		}

		.btn-box {
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			padding: 15rpx;
			padding-bottom: calc(constant(safe-area-inset-bottom) + 15rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 15rpx);

			.btn_text {
				background-color: #ff6735;
				padding: 10rpx;
				color: #fff;
				border-radius: 10rpx;
				font-size: 32rpx;
				word-wrap: break-word;
				height: auto;
				white-space: pre-line;
				margin-bottom: 10rpx;
			}

			.btn {
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 32rpx;
				background-color: #ff6735;
				color: #fff;
				margin-bottom: 10rpx;
			}
		}
	}
</style>